Atom 前端实用插件推荐

看之前

首先,看这篇文章之前,你应该知道如何查找和安装atom插件,如果不会的话,那也不要紧。

对不起,我不教。

O(∩_∩)O~,开玩笑的。

安装方法

  1. 打开Atom的设置——Install-然后直接搜索插件名字,找到插件后直接点击install按钮就可以了。
  2. 打开终端工具,直接输入

    1
    apm install atom-clock

    atom-clock就是插件的名字

干货(根据你自己需求安装)

atom-clock

显示系统时间
这基本上是给mac用户的一个插件,因为时间显示的地方是在Atom界面的右下角,windows系统时间默认就是在右下角,全屏也会在右下角有系统时间显示,除非你隐藏任务栏;然而mac系统是在右上角显示时间,全屏后就不会显示了。

atom-beautify

让代码格式更规范好看些

file-icons

文件图标
里面有海量的图标,每种不同的文件都有不用的图标来显示,装完之后,atom瞬间上了一个档次。

minimap

迷你地图
在你的atom右上角显示一个迷你地图,鼠标移上去后有齿轮,可以设置

autocomplete-modules

模块名自动补全

autocomplete-paths

自动文件路径提示
很方便的一个插件,如果安了插件,你的路径都是全拼出来的,那拼错的的概率很大

simplified-chinese-menu

简体中文包
英文不是很好的同学可以下载使用这个插件,但是有时候会导致设置页面的错位的情况,自己看情况使用。

atom-bootstrap3

bootstrap 的自动代码提示
bootstrap 的class名那么长,谁能记得住啊,记住用法才是重点,名字就交给这个插件。

没图就不能脑补了吗?

open-in-browser

打开浏览器预览
前端程序猿的开发利器,直接会在右键菜单里添加open-in-browser的选项,点击就能打开浏览器了,但是打开的是默认的浏览器

身为一个程序猿,这还需要图?

browser-plus

打开atomn内置浏览器预览页面
也是右键选择打开,内置浏览器用的是webkit的内核

open-in-browsers

打开更多的浏览器
请注意:和上上个插件open-in-browser不一样,多了一个s,但是功能强大了很多,
右键你的html文件打开选项,tip:鼠标放到文字上右键,否则自己领悟痛苦把。

直接点击按钮,在atom的左下角,分别是:IE,Google Chrome,Firefox,Opera,Safari,(最后一个你应该猜的出来,猜不出来也没关系,说明你比一般人笨一点而已。)

simple-drag-drop-text

拖动代码段
不需要拷贝加粘贴,直接选中你要拖动的代码段,然后按住鼠标直接拖动到指定位置

我就是图

color-picker

取色器
当你需要颜色的时候,在任意位置,shift+command+c键直接出来取色界面,(windows用户脑补键位)

css-color-name

提示颜色代码

pigments

color name 和rgba还有其他的一些颜色类代码,让他们在编译器页面显示颜色

还可以通过插件里的Marker Type设置显示颜色的样式

emmet

HTML/CSS代码快速编写神器
快速手写 HTML, CSS, Sass / SCSS / LESS

  • 比如输入“!”或“html:5”,然后按Tab键生成HTMl初始化
  • 比如轻松添加类、id、文本和属性
  • 比如,ul>li*3可以生成多个标签
  • ……
    详细版的说明:http://www.iteye.com/news/27580

atom-ternjs

ES5, ES6, ES7, Node.js, jQuery, Angular 等等 js 代码自动补全

要什么共享单车

jquery-snippets

jquery代码片段补全
一款可以快速写JQ的插件,输入snippet简写,tab键或者Enter触发补全,基本涵盖了JQ的所有方法和事件。

css-snippets

css代码片段补全
同理,css代码补全

接下来的图片请脑补

javascript-snippets

原生javascript代码片段补全
同理,js代码补全,写代码效率提高20%

要什么自行车

activate-power-mode

一个小游戏而已,有强迫症的别玩,伤身体,玩多了,那地方会虚的

sync-settings

备份插件
可以备份ATOM的全局设置、插件、按键绑定(keymaps)、界面样式、代码片段(snippets )、 init script。
详细版说明:http://blog.csdn.net/zsl10/article/details/51891306

linter

基本语法检查框架
linter-ui-default
显示,警告,错误界面
必须安装以上两个插件,才能安装下面的插件。

  1. linter-jshint js代码检查工具
  2. linter-csslint css代码检查工具
  3. linter-htmlhint HTML代码检查工具

git-plus

丢掉终端,在 Atom 里面执行 Git 命令

.

.

.

.

好吧,骗你了,最后来个很带感的UI主题

就骗你了,怎么了。

没错,就是它atom-material-ui

觉得不好看的跳过,下面的不用看了。
觉得好看的,我们两继续:
记得在install里面选择themes搜索

安装完成后,打开插件设置

然后我们开始设置,
来跟着我一起设置看看效果
前方多图预览



好了,最后给你们三个同系列的,代码颜色主题
atom-material-syntax
atom-material-syntax-dark
atom-material-syntax-light

这次不骗你,真的结束了。
推荐:atom官方插件库
推荐:atom官方主题库

如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [分享],没有!
如果您想转载本博客,请注明出处
如果您对本文有意见或者建议,欢迎 [留言],留个屁!
感谢您的阅读,请关注我的后续博客

melodd wechat
欢迎您扫一扫上面的qq群号,加入我们的web技术群!